<template>
    <div class="warp">
        <div class="title">
            <i class="iconfont icon-fanhui1"></i>
            <input type="text" placeholder="搜索店铺商品" class="ipt">
            <i class="iconfont icon-sousuo"></i>
        </div>
        <div>
        <div class="tit">
            <span class="spa">成都康莱商贸有限公司</span>
            <span style="font-size:0.1rem;width:0.42rem;margin-top:0.15rem;margin-left:1.8rem;color:#fff;">3390人</span>
            <p class="tit_right" style="margin-right:0.2rem">
                <span class="iconfont icon-collection"></span>
                <span>收藏</span>
            </p>
        </div>
        <div class="con" >
            <ul class="lis">
                <li @click="getts('shelvesTime',0,)" :class="{select:num==0}">默认</li>
                <li @click="getts('salesVolume',1,)" :class="{select:num==1}">销量</li>
                <li style="margin-right:0" @click="getts('orderPrice',2)" :class="{select:num==2}">价格</li>
            </ul>
            <div class="con_tow">
                <label for="loulou" class="loulou">
                    <input type="checkbox" id="loulou" value="1" v-model="val" @change="change">
                    <!-- <div class="check_container"></div> -->
                    <span class="sp" >仅显示有货</span>
                </label>  
                <label  class="loulou2" style="margin-left:1rem;">
                    <input type="checkbox" id="loulou2" value="2" style="color:red;background:red;" v-model="val" @change="change">
                    <!--  -->
                    <span style="margin-left:-0.16rem;" class="spa">推荐</span>
                </label>
            </div>
            <div class="con_san" v-if="goodses.goodses">
                <ul class="list" >
                    <li v-for="(item,key) in goodses.goodses" :key="key">
                        <img :src="item.picsUrl" alt="">
                        <p>{{item.productName}}</p>
                        <div class="mony">
                            <span style="font-size:0.1rem">￥</span>
                            <span>{{item.orderPrice}}</span>
                            <span style="font-size:0.1rem;">.00</span>
                        </div>
                        <div class="zengpin">
                            <span class="spa">赠品</span>
                            <span class="spa2">店铺满赠</span>
                        </div>
                        <div class="bootm">
                            <span>5瓶起批</span>
                            <span>已售200瓶</span>
                        </div>
                    </li> 
                </ul>
            </div>
            <div class="con_si" v-else>
                <div v-if='loaded'>
                <img src="../../assets/ic_bills_come.png" alt="">
                <div style="margin-top:-1.5rem;color:#ccc;">无可售商品</div>
                </div>
            </div>
        </div>
        </div>
        <div class="nav">
            <div class="nav_one" @click.native="nav">快速<br>导航</div>
            <div class="cell"  @click.native="cel">X</div>
            <div class="nav_left">
                <div class="nav_warp">
                <div class="my">
                    <router-link to="qldangan">
                   <img src="../../assets/档案.png" alt="" class="wode"></router-link>
                </div>
                <div class="my2">
                    <router-link to="my">
                   <img src="../../assets/ic_user.png" alt="" class="user"></router-link>
                </div>
                 <div class="my3">
                     <router-link to="goodsDetails">
                   <img src="../../assets/ic_cart_default.png" alt="" class="user"></router-link>
                </div>
                  <div class="my4">
                      <router-link to="qilinfenlei">
                     <img src="../../assets/ic_classifyq.png" alt="" class="user"></router-link>
                  </div>
                    <div class="my5">
                        <router-link to="home">
                       <img src="../../assets/ic_index_default.png" alt="" class="user"> </router-link>
                  </div>
            </div></div>
        </div>
        <div class="foter">
            <div> 
                <!-- <img src="../../assets/ic_homeq.png" alt="" style="width:0.25rem;height:0.25rem;" v-if="aaa" @click="dj"> -->
                <img src="../../assets/店铺-当前.png" alt="" >
                <p>店铺</p>
            </div> 
            <div>
                <router-link to="qilinfenlei">
                <img src="../../assets/ic_classifyq.png" alt="" v-if="bbb">
                <!-- <img src="../../assets/分类-当前.png" alt="" v-else> -->
                </router-link>
                <p>分类</p>
            </div> 
            <div>
                <router-link to="qilinpinpan">
                <img src="../../assets/品牌.png" alt="" v-if="ccc">
                <!-- <img src="../../assets/ic_brandh.png" alt="" v-else> -->
                <p>品牌</p></router-link>
            </div> 
            <div style="margin-right:0.4rem;"> 
                <router-link to="qldangan">
                <img src="../../assets/档案.png" alt="" v-if="ddd" @>
                <!-- <img src="../../assets/档案-当前.png" alt="" v-else> -->
                <p>档案</p></router-link>
            </div> 
        </div>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import api from '../../utils/api';
import store from '../../store';
import qs from 'qs';
import { setTimeout } from 'timers';
import axios from "axios";
import Axios from 'axios';
import http from "../../utils/http"

export default {
    name:"qilin",
    data(){
        return{
           goodses: {
               goodses: null
           },
           num:0,
           attachment:"",
           res:{},
           orderBy:"shelvesTime",
           itm:0,
           aaa:true,
           bbb:true,
           ccc:true,
           ddd:true,
           totalCount:"",
           val: [],
           stock: 2,
           tagRecommend: 2,
           loaded: false
        }
    },
    methods:{
        change() {
            if(this.val.length == 1) {
                if(this.val[0] == 1) {
                    this.stock = 1;
                    this.tagRecommend = 2;
                }else {
                   this.stock = 2;
                    this.tagRecommend = 1; 
                }
            }else if(this.val.length == 2) {
                this.stock = 1;
                this.tagRecommend = 1;
            }else {
                this.stock = 2;
                this.tagRecommend = 2;
            }
            this.gett()
        },
        dj(){
            this.aaa=false
        },
        dj2(){
            this.bbb=false
        },
        dj3(){
            this.ccc=false
        },
        dj4(){
            this.ddd=false
        },
        stork(){
            axios.post("https://web-gateway.newbeescm.com/b2b-app-web/searchGoodsList",{
                cityId:542500000000,
                countyId:542521000000,
                dealerId:"107",
                groupStoreId:49915,
                merchantId:7462,
                orderBy:"shelvesTime",
                orderWay:0,
                pageNum:1,
                pageSize:20,
                provId:540000000000,
                stationId:5,
                status:1,
                stock:2,
                storeId:"8131",
                tagRecommend:2,
                town:542521100000
            }).then(res =>{
                if(res.data.status.statusCode===0){
                    this.goodses=res.data.result;
                    console.log(this.goodses)
                }
            })
            .catch(err=>{
                console.log(err)
            })
        },
        click(){
            var con_san=document.querySelector(".con_san")
            var con_si=document.querySelector(".con_si")
            var spa=document.querySelectorAll(".con_tow .loulou2 .spa")[0]
            var sp=document.querySelectorAll(".con_tow .loulou .sp")
            console.log(spa)
            spa.onclick=function(){
                con_si.style.display="block"
                con_san.style.display="none"
            }
        },
            clic(){
            var con_san=document.querySelector(".con_san")
            var con_si=document.querySelector(".con_si")
            var spa=document.querySelectorAll(".con_tow .loulou2 .spa")[0]
            var sp=document.querySelectorAll(".con_tow .loulou .sp")[0]
            sp.onclick=function(){
                 con_si.style.display="none"
                 con_san.style.display="block"
            }
        },
        nav(){
           var nav_one=document.querySelector(".nav_one");
           var cell=document.querySelector(".cell");
           var nav_left=document.querySelector(".nav_left")
           nav_one.onclick=function(){
               cell.style.display="block"
               nav_left.style.display="block"
               nav_one.style.display="none"
           }
        },
         cel(){
           var nav_one=document.querySelector(".nav_one")
           var cell=document.querySelector(".cell")
           var nav_left=document.querySelector(".nav_left")
           nav_left.style.display="none"
           cell.onclick=function(){
               nav_one.style.display="block"
               nav_left.style.display="none"
               cell.style.display="none"
               
           }
        },
        getts(orderBy, itm){
            this.num=itm;
            this.orderBy = orderBy;
            this.gett()
        },
       gett(){
           Axios.post("https://web-gateway.newbeescm.com/b2b-app-web/searchGoodsList",{
                   cityId:510100000000,
                   countyId:510116000000,
                   dealerId:"14607",
                   groupStoreId:66958,
                   merchantId:14948,
                   orderBy: this.orderBy,
                   orderWay:0,
                   pageNum:1,
                   pageSize:20,
                   provId:510000000000,
                   stationId:51,
                   status:1,
                   stock:this.stock,
                   storeId:"15463",
                   tagRecommend:this.tagRecommend,
                   town:510116003000
           }).then(res =>{
               this.res=res
               this.loaded = true
              if(res.data.status.statusCode === 0){
                  this.goodses=res.data.result 
                    console.log(this.goodses)
              }
           })
           .catch(err=>{
               this.loaded = true
                console.log(err)
           })
       },
    },
    mounted(){
        this.getts("shelvesTime",0)
        // this.click()
        this.nav()
        this.cel()
        // this.stork()
    }
}
</script>
<style lang="scss" scoped>
// .con_san{
//     display: block
// }

.nav{
    width: 0.4rem;
    height: 0.4rem;
    background: #333;
    border: 1px solid #333;
    border-radius: 50%;
    position: fixed;
    bottom:0.7rem;
    right:0.35rem;
    opacity: 0.7;
    .nav_one{
        width: 0.4rem;
        height: 0.4rem;
        text-align: center;
        font-size: 0.12rem;
        color: #fff;
        margin:  0 auto;
        margin-top: 0.09rem;
    }
    .cell{
        font-size: 0.12rem;
        color: #ccc;
        position: absolute;
        left: 0.14rem;
        top: 0.15rem;
        display: none;
        z-index: 999;
    }
    .nav_left{
       
        position: relative;
        left: 0;
        top: 0;
        width: 0.4rem;
        height: 0.4rem;
        .my{
            width: 0.3rem;
            height: 0.3rem;
            background: #333;
            opacity: 0.7;
            border-radius: 50%;
            position: absolute;
            top: 0.2rem;
            left: -0.9rem;;
             .wode{
                width: 0.15rem;
                height: 0.15rem;
                margin-top: 0.08rem;
                background: #fff;
             }
        } 
       .my2{
            width: 0.3rem;
            height: 0.3rem;
            background: #333;
            opacity: 0.7;
            border-radius: 50%;
            position: absolute;
            top: -0.2rem;
            left: -0.8rem;
             .user{
                width: 0.15rem;
                height: 0.15rem;
                margin-top: 0.08rem;
                background: #fff;
             }
    } 
     .my3{
            width: 0.3rem;
            height: 0.3rem;
            background: #333;
            opacity: 0.7;
            border-radius: 50%;
            position: absolute;
            top: -0.55rem;
            left: -0.55rem;
             .user{
                width: 0.15rem;
                height: 0.15rem;
                margin-top: 0.08rem;
                background: #fff;
             }
    } 
    .my4{
            width: 0.3rem;
            height: 0.3rem;
            background: #333;
            opacity: 0.7;
            border-radius: 50%;
            position: absolute;
            top: -0.8rem;
            left: -0.2rem;
             .user{
                width: 0.15rem;
                height: 0.15rem;
                margin-top: 0.08rem;
                background: #fff;
             }
    } 
    .my5{
            width: 0.3rem;
            height: 0.3rem;
            background: #333;
            opacity: 0.7;
            border-radius: 50%;
            position: absolute;
            top: -0.95rem;
            left: 0.15rem;;
             .user{
                width: 0.15rem;
                height: 0.15rem;
                margin-top: 0.08rem;
                background: #fff;
             }
    } 
    }
}
.foter{
    width: 100%;
    height: 0.5rem;
    background: #fff;
    display: flex;
    position: fixed;
    bottom: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    border-top: 1px solid #ccc;
    div{
        margin-top: 0.15rem;
        margin-left: 0.5rem;
        position: relative;
        top: 0.05rem;
        
        img{
            position: absolute;
            top:-0.25rem;
            left: 0.05rem;
        }
    }
    img{
        width: 0.18rem;
        height: 0.18rem;;
    }
}
.title{
    width: 100%;
    height: 0.44rem;
    background: red;
    position: relative;
    color: #fff;
    .icon-fanhui1{
        position: absolute;
        left: 0.14rem;
        top: 0.1rem;
        color: #999;
        font-size: 0.25rem;
    }
    .ipt{
        width: 2.65rem;
        height: 0.28rem;
        margin: 0 auto;
        margin-top: 0.06rem;
        padding-left: 0.3rem;
        border-radius: 0.04rem;
        background: #F2F1F6;
        outline: none;
        border: none;
        font-size: 0.14rem;
        color:#999
    }
    .icon-sousuo{
        position: absolute;
        left: 0.4rem;
        top: 0.08rem;
        font-size: 0.25rem;
        color: #999;
    }
}
    .tit{
        width: 100%;
        height: 0.4rem;
        background: #f9f9f9;
        font-size: 0.14rem;
        display: flex;
        justify-content: center;
        position: relative;
        background: red;
        // align-items: center;
        .spa{
            position: absolute;
            left: 0.13rem;
            color: #fff;
            line-height: 0.4rem;
            margin-right: 0.5rem;
            font-size: 0.12rem;
        }
        .tit_right{
            border: 1px solid #fff;
            font-size: 0.1rem;
            color: #fff;
            padding: 0.01rem;
            border-radius: 0.04rem;
            width: 0.5rem;
            height: 0.2rem;
            position: absolute;
            right: -0.03rem;
            top: 0.1rem;
        }
        .icon-collection{
            margin: 0.03rem;
        }
    }
     .select{
        color: red;
    }
    .con{
        width: 100%;
        .lis{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 0.37rem;
            li{
                font-size: 0.14rem;
                margin-right: 1rem;
                line-height: 0.37rem;
            }
        }
        .con_tow{
            width: 100%;
            height: 0.35rem;
            border: 0.005rem solid #F2F1F6;
            border-left: 0;
            border-right: 0;
            position: relative;
            .loulou{
                position: absolute;
                left: 0.14rem;
                top: 0.1rem;
                span{
                    position: absolute;
                    left: 0.15rem;
                    top: 0.04rem;
                    width: 0.8rem;
                    font-size: 0.12rem;
                }
            }
            .loulou2{
                position: absolute;
                left: 0.5rem;
                top: 0.1rem;
                .spa{
                    position: absolute;
                    left: 0.15rem;
                    top: 0.04rem;
                    width: 0.8rem;
                    font-size: 0.12rem;
                }
            }
        }
         .list{
            width: 100%;
            margin-left: 0.14rem;
            margin-top: 0.13rem;
            li{
                width: 1.6rem;
                height: 2.5rem;
            
                margin-right: 0.17rem;
                float: left;
                margin-bottom: 0.25rem;
                img{
                    width: 1.6rem;
                    height: 1.6rem;
                }
                p{
                    font-size: 0.12rem;
                    color: #333;
                    margin-top: 0.1rem;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .mony{
                    margin-left: -1rem;
                    margin-top: 0.06rem;
                    color: red;
                }
                .zengpin{
                    color: red;
                    font-size: 0.1rem;
                    margin-left: -0.57rem;
                    margin-top: 0.06rem;
                    .spa{
                        padding: 0.02rem;
                        border: 1px solid red;
                        border-radius: 0.02rem;
                        margin-right: 0.2rem;
                    }
                    .spa2{
                        padding: 0.02rem;
                        border: 1px solid red;
                        border-radius: 0.02rem;
                    }
                }
                .bootm{
                     font-size: 0.1rem;
                     color: #999;  
                     margin-left: -0.65rem;
                     margin-top: 0.1rem;
                    }
            }
        }
        .con_si{
          width: 100%;
          height: 100%;
          background: #F2F1F6;
          position: fixed;
        //   display: none;
          img{
              width: 1.34rem;
              height: 0.74rem;
              margin: 50% auto;
          }
        }
    }
    .lis .active {
  border-left: 1px solid red;
  color: red;
  background: #fff;
}
// .con_san{
//     display: none;
// }
a{
  color: #333
}
</style>